<template>
  <div class="">
    <y-header />
    <div class="container account_cont clearfix" style="min-height: calc(100vh - 190px );">
      <y-side :type="'xgmm'" />
      <div class="main_box">
        <ul class="tabs clearfix">
          <a class="tab on">修改密码</a>
        </ul>
        <div class="main_cont form">
          <form action="" @submit="userInfoUpdate">
            <div class="form_group">
              <div class="label">手机号:</div>
              <div class="form_ctl">
                <div class="text">{{ obj.mobile }}</div>
              </div>
            </div>
            <div class="form_group">
              <div class="label">密码:</div>
              <div class="form_ctl">
                <input v-model="password1" type="password" class="form_input" placeholder="请输入密码">
              </div>
            </div>
            <div class="form_group">
              <div class="label">确认密码:</div>
              <div class="form_ctl">
                <input v-model="password2" type="password" class="form_input" placeholder="请输入确认密码">
              </div>
            </div>
            <div class="form_group">
              <div class="label">&nbsp;</div>
              <div class="form_ctl">
                <button type="submit" class="submit_btn">保存</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- <bottom /> -->
  </div>
</template>
<script>
import YSide from '~/components/account/Side'
import YHeader from '~/components/common/Header'
import { getUserInfo, usersUpdataPwd } from '@/api/user.js'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    YSide
  },
  data() {
    return {
      password1: '',
      password2: '',
      obj: {}
    }
  },
  head() {
    return {
      title: '个人中心-修改密码-' + this.$store.state.websiteInfo.websiteName
    }
  },
  mounted() {
    this.userInfo()
  },
  methods: {
    userInfo() {
      getUserInfo().then(res => {
        this.obj = res || {}
      })
    },
    userInfoUpdate(e) {
      e.preventDefault()

      if (this.password1.length < 6 || this.password1.length > 20) {
        this.$msgBox({
          content: '请输入6-20位的登录密码,区分大小写,不可有空格',
          isShowCancelBtn: false
        }).catch(() => {
        })
        return false
      }
      if (this.password1 !== this.password2) {
        this.$msgBox({
          content: '两次输入密码不一致',
          isShowCancelBtn: false
        }).catch(() => {
        })
        return false
      }

      const params = {
        id: this.obj.id,
        mobile: this.obj.mobile,
        password1: this.password1,
        password2: this.password2
      }
      usersUpdataPwd(params).then(res => {
        this.$msgBox({
          content: '密码修改成功',
          isShowCancelBtn: false
        }).then(async(val) => {
          // window.location.reload()
          this.password1 = ''
          this.password2 = ''
        }).catch(() => {
          // window.location.reload()
          this.password1 = ''
          this.password2 = ''
        })
      })
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import '~/assets/css/account.scss';

.upload_ctl {
  .preview {
    width: 100px;
    height: 100px;
    text-align: center;
    margin-bottom: 10px;

    i {
      line-height: 120px;
      font-size: 100px;
      color: #ddd;
    }
  }
}
</style>
